<template>
  <div class="cPage">
    <div class="view">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-input
            v-model="formInline.searchKey"
            placeholder="请输入标题、作者"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="formInline.date"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="getArticleList">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="name" label="资源名称"></el-table-column>
        <el-table-column
          prop="name"
          label="资源类型"
          :filters="resTypeList"
          :filter-method="filterTag"
          filter-placement="bottom-end"
        >
          <template slot-scope="scope">
            <span>
              {{ resTypeMap[scope.row.resType] }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="createDate" label="日期">
          <template slot-scope="scope">
            <span>
              {{ scope.row.calDate | momentDay("YYYY-MM-dd") }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="pvAll" label="pv 总数"></el-table-column>
        <el-table-column prop="pvPc" label="pv PC数"></el-table-column>
        <el-table-column prop="pvPhone" label="pv 手机数"></el-table-column>
      </el-table>
      <div class="paginationCommon">
        <el-pagination
          background
          :page-size="limit"
          :total="total"
          @current-change="getArticleList"
          layout="prev, pager, next, jumper"
          >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { adStatus } from "@/config/ad";

export default {
  components: {},
  data() {
    return {
      limit: 15,
      total: 0,
      tableData: [],
      formInline: {
        searchKey: "",
        date: [],
      },
      resTypeMap: {
        ZX: "资讯",
        HD: "活动",
        AL: "案例库",
        BG: "擎物研究院报告",
        QY: "企业",
      },
      resTypeList: [
        { text: "资讯", value: "ZX" },
        { text: "活动", value: "HD" },
        { text: "案例库", value: "AL" },
        { text: "擎物研究院报告", value: "BG" },
        { text: "企业", value: "QY" },
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  methods: {
    filterTag(value, row) {
      return row.resType === value;
    },
    getArticleList(page = 1) {
      const { formInline, limit } = this;
      const start = (page - 1) * limit || 0;
      const params = {
        searchKey: formInline.searchKey,
        start,
        limit
      };
      if (formInline.date) {
        params.startDate = formInline.date[0]
          ? new Date(formInline.date[0]).getTime()
          : "";
        params.endDate = formInline.date[1]
          ? new Date(formInline.date[1]).getTime()
          : "";
      }
      this.$axios
        .get("/api/data/business/article/pv.json", { params })
        .then((response) => {
          this.tableData = response.list;
          this.total = response.count;
        });
    },
  },
  created() {
    this.getArticleList();
  },
};
</script>
<style lang="scss" scoped>
.cPage {
  padding: 30px 15px;
}
.edit {
  margin: 0px 40px 0 0;
}
</style>
